<!--  -->
<template>
  <div class="table-title" ref="tableTitle">Headcount人事总人数</div>
  <el-table :data="tableData" style="width: 100%" :height="selfTableHeight" border header-cell-class-name="table-header-row" :span-method="objectSpanMethod">
    <el-table-column prop="Sequence" label="序号" width="120" fixed />
    <el-table-column prop="Name" label="姓名 Name" width="120" fixed />
    <el-table-column prop="Facility" label="地点 Facility" width="120" fixed />
    <el-table-column prop="Level" label="级别 Level" width="120" fixed />
    <el-table-column prop="Position" label="职位 Position" width="120" fixed />
    <el-table-column v-for="(item, idx) in tableColumn" :key="idx" :prop="item" :label="item" width="120" />

    <el-table-column fixed="right" label="操作" min-width="80">
      <template>
        <el-button link type="primary">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { generateDates } from '../../utils'

const props = defineProps({
  tableHeight: {
    type: Number,
    default: 500,
  },
})
const tableTitle = ref<HTMLElement | null>(null)
const dates: { [key: string]: number } = {}
const dates2: { [key: string]: number } = {}
const tableColumn = ref<string[]>([])
tableColumn.value = generateDates('2024-7-8', '2025-2-3', 7, 'yyyy-M-d')
tableColumn.value.forEach((item: string) => {
  dates[item] = 1
  dates2[item] = 25.0
})
const tableData = [
  { Sequence: 'Headcount', Name: '', Facility: '', Level: '', Position: '', ...dates2 },
  { Sequence: '1', Name: '徐健', Facility: '长春', Level: '', Position: '动画总监', ...dates },
  { Sequence: '2', Name: '翟珺莹', Facility: '长春', Level: '', Position: '动画总监', ...dates },
  { Sequence: '3', Name: '张成龙', Facility: '长春', Level: '', Position: '动画主管', ...dates },
  { Sequence: '4', Name: '吴雨峰', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '5', Name: '宋强', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '6', Name: '刘凤娇', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '7', Name: '孙继阳', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '8', Name: '冯立娜', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '9', Name: '裴业盛', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '10', Name: '张宇', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '11', Name: '王苍贺', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '12', Name: '王闯（1214）', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '13', Name: '刘鑫', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '14', Name: '王梓萁', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '15', Name: '张舒涵', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '16', Name: '张瀚夫', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '17', Name: '马毓鸿', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '18', Name: '李澍', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '19', Name: '朱毅', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '20', Name: '伊巍', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '21', Name: '张嘉琦', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '22', Name: '黄阳', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '23', Name: '王雅格', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '24', Name: '宁睿聪', Facility: '长春', Level: '', Position: '动画师', ...dates },
  { Sequence: '25', Name: '王东茗', Facility: '长春', Level: '', Position: '动画师', ...dates },
]

const selfTableHeight = computed(() => {
  let height = props.tableHeight
  if (tableTitle.value) {
    height = props.tableHeight - tableTitle.value.offsetHeight
  }
  return height
})

const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  if (rowIndex === 0) {
    if (columnIndex === 1) {
      return [1, 1]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}
</script>
<style scoped lang="scss"></style>
